<template>
  <view>
    <template v-if="list.length > 0">
      <view class="zpItem" v-for="(item, index) in list" :key="index">
        <view class="imgBox">
          <image
            class="img"
            @click="
              TanPreviewImage(
                list.map((j: any) => j.picture),
                index
              )
            "
            :src="item.picture"
            mode="aspectFill"
          />
          <view class="zan">
            <image @click="likeFn(item)" v-if="item.likeFlag === '1'" class="heart" src="../../static/home/red_heart.png" mode="aspectFill" />
            <image @click="likeFn(item)" v-else class="heart" src="../../static/home/heat.png" mode="aspectFill" />
            <text>{{ item.likeCount }}</text>
          </view>
          <view class="user">
            <image :src="item.avatar" mode="aspectFill" />
            {{ item.nickName }}
          </view>
        </view>
        <view class="nameBox">
          <view class="t1">{{ item.name }}</view>
          <view class="t2">{{ item.introduce }}</view>
        </view>
      </view>
    </template>
    <view v-else style="margin-top: 20rpx; width: 100%; height: 60vh; display: flex; justify-content: center; background: #fff">
      <u-empty mode="list"></u-empty>
    </view>
  </view>
</template>
<script setup lang="ts">
import { getActivityList, getExcellentList, myContribute, photographyLike } from "@/api/home";
import { goPage, TanPreviewImage } from "@/utils/commonFn";
//@ts-ignore
import { onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
import { onMounted, ref } from "vue";
const { activityId, pageType } = defineProps<{
  pageType: string;
  activityId: string;
}>();
onMounted(() => {
  rest();
});
const rest = async () => {
  getList();
};
const pageStatus = ref("loadmore");
const page = ref(1);
const list = ref<any[]>([]);
const getList = async () => {
  if (pageStatus.value == "nomore") {
    return;
  }
  pageStatus.value = "loadmore";
  let res: any;
  console.log(pageType, "12313");

  if (pageType === "my") {
    res = await myContribute({
      pageNum: page.value,
      activityId,
    });
  } else {
    res = await getActivityList({
      pageNum: page.value,
      activityId,
    });
  }
  list.value = list.value.concat(res.rows);
  if (list.value.length >= (res.total as number)) {
    pageStatus.value = "nomore";
  } else {
    pageStatus.value = "loadmore";
  }
};
const likeFn = async (item: any) => {
  await photographyLike({ id: item.id });
  if (item.likeFlag === "1") {
    item.likeFlag = "0";
    --item.likeCount;
  } else {
    item.likeFlag = "1";
    ++item.likeCount;
  }
};
onReachBottom(() => {
  page.value++;
  getList();
});
</script>
<style lang="less" scoped>
.zpItem {
  width: 100%;
  .imgBox {
    width: 100%;
    height: 508rpx;
    position: relative;
    .img {
      width: 100%;
      height: 100%;
    }
    .zan {
      position: absolute;
      right: 16rpx;
      top: 16rpx;
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: #ffffff;
      .heart {
        width: 36rpx;
        height: 36rpx;
        margin-right: 6rpx;
      }
    }
    .user {
      position: absolute;
      left: 16rpx;
      bottom: 16rpx;
      display: flex;
      align-items: center;
      gap: 20rpx;
      font-size: 28rpx;
      color: #ffffff;
      image {
        width: 56rpx;
        height: 56rpx;
        border-radius: 50%;
      }
    }
  }
  .nameBox {
    padding: 26rpx 34rpx;
    .t1 {
      font-size: 28rpx;
      color: #3d3d3d;
    }
    .t2 {
      font-size: 24rpx;
      color: #767676;
      margin-top: 14rpx;
    }
  }
}
</style>
